
// 多文件(入口)打包 : 
// - 重新配置入口文件; 


const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {
      // webpackDevServer 服务器的配置; 
      entry : {
            index  : "./src/index/main.js",
            list   : "./src/list/main.js",
            detail : "./src/detail/main.js",
      },
      mode : "production",
      // 添加map文件; 
      devtool : 'source-map',
      // 我们output 设置的是dist里面的js代码; 
      output : {
            // 文件叫啥名; 
            filename : "./javascripts/[name].js",
            // 文件存储路径; 
            // - 这里必须是绝对路径; 
            // 盘符开始的路径; 
            // __dirname : nodejs 的常量表示当前文件所在的绝对路径; 
            path : resolve( __dirname , "./dist/") 
      },
      module : {
            rules : [
                  {
                        // 判定使用loader的文件类型; 
                        test : /\.css$/ ,
                        // 表示使用loader的顺序，顺序是从后往前用的; 
                        use : [
                              "style-loader",
                              "css-loader"
                        ]
                  },
                  {
                        test : /\.s(c|a)ss$/,
                        use : [
                              MiniCssExtractPlugin.loader,
                              "css-loader",
                              "sass-loader"
                        ]
                  },
                  {
                        test :  /\.(jpg|png|webp)$/,
                        loader :"url-loader",
                        options: {
                              // 尺寸分界线, 这个尺寸一下的转换成 base64 编码, 这个尺寸以上的转换成文件
                              // 单位是 b
                              limit: 1024 * 24,
                              // 大于 limit 尺寸的给你编译成文件, 存储的名称
                              // [hash] 表示随机名称
                              // [ext] 表示原始文件后缀名
                              name: 'images/[hash].[ext]',
                              // 强制关闭ES6编码功能; 
                              esModule: false,
                         },
                         // webpack5 升级的问题，作者额外提供的一个参数; 
                         type: 'javascript/auto'
                  },
                  {
                        test : /\.html$/,
                        use :  ["html-loader"],
                  },
            ]
      },
      plugins : [
            // 编译过程存在百分比; 
            new webpack.ProgressPlugin(),
            new MiniCssExtractPlugin({
                  filename: 'css/[name]-[hash].css'
            }),
            // 调用清空插件; 
            new CleanWebpackPlugin(),
            // 调用html创建插件; 
            new HtmlWebpackPlugin({
                  // 使用哪里的模板 ; 
                  template : "./src/index/views/index.html",
                  // 把script标签注入到哪里; 
                  inject : "body",
                  filename : "index.html",
                  chunks : ["index"]
            }) ,
            new HtmlWebpackPlugin({
                  // 使用哪里的模板 ; 
                  template : "./src/list/views/list.html",
                  // 把script标签注入到哪里; 
                  inject : "body",
                  filename : "list.html",
                  chunks : ["list"]

            }) ,
            new HtmlWebpackPlugin({
                  // 使用哪里的模板 ; 
                  template : "./src/detail/views/detail.html",
                  // 把script标签注入到哪里; 
                  inject : "body",
                  filename : "detail.html",
                  chunks : ["detail"]
            }) ,
           
      ]
}